<template>
  <div class="dropdown" ref="dropDownRef">
    <button class="btn btn-secondary dropdown-toggle"
            type="button"
            id="dropdownMenuButton"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            >
      {{title}}
    </button>
    <ul class="dropdown-menu" :style="{display:'block'}" v-if="showMenu"
        aria-labelledby="dropdownMenuButton">
        <slot></slot>
    </ul>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue'
import userClickOutSide from '@/hooks/userClickOutSide'

export default defineComponent({
  name: 'DropDown',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup () {
    const dropDownRef = ref<null | HTMLElement>(null)
    const showMenu = userClickOutSide(dropDownRef)
    return {
      showMenu,
      dropDownRef
    }
  }
})
</script>

 <style>
</style>
